<template>
	<view class="p-bot40" :style="{'--color':color}">
		 <status-bar title='我的预约' hideBg="1" :back="back"></status-bar>
		 <view class="tabs">
			  <u-tabs :list="list1" :scrollable="false" :lineColor="color" 
			  @click="click" :current="current" 
			  :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
		 </view>
		 
		 <view class="list" :class="{'expired':item.state == 4}"  
		      v-for="(item,index) in pageData" :key="index"
			  @click="toDetails(item.id)">
			 <view class="Tips Waiting" v-if="item.state == 1 || item.state == 3">待使用</view>
			 <view class="Tips used" v-if="item.state == 2">已使用</view>
			 <view class="Tips expiredbg" v-if="item.state == 4">已过期</view>
			 <view class="Tips expiredbg" v-if="item.state == 5">已退款</view>
			 <view class="Tips expiredbg" v-if="item.state == 6">退款中</view>
			 <image :src="$imgUrls(item.time_detail.img)" mode="aspectFill" class="Img"></image>
			 <view class="conTxt">
				 <text class="name ellipsis">{{item.time_detail.name}}</text>
				 <text class="Time">购买时间:{{item.add_time}}</text>
				 <text class="Time">开宴时间:{{item.time_detail.open_time_stamp}}</text>
				 <view class="row">
					 <view class="table_li" 
					 v-for="(subItem,subIndex) in item.sites_detail" :key="subIndex">
					 {{subItem.type_name}}-{{subItem.name}}
				</view>
				 </view>
			 </view>
			 
			
				
			 <view class="PriceInfo" v-if="item.state == 3 || item.state == 1">
				  <view class="Earnest" >
					  <text class="size22">定金:</text>
					  <text class="size32">￥{{item.order_price}}</text>
				  </view>
				  <view class="Earnest" v-if="item.make_up_price > 0">
					  <text class="size22">妆造:</text>
					  <text class="size32">￥{{item.make_up_price}}</text>
				  </view>
				  <view class="Balance" v-if="item.tail_price > 0">{{item.state == 3?'应付':''}}尾款:￥{{item.tail_price}}</view>
			 </view>
		
			
			<view class="PriceInfo" v-if="item.state == 2">
			 	 <view class="Use">￥{{item.payment}}</view>
			 </view>
		 </view>
		 
		 <emptys v-if="!pageData.length"></emptys>
		 
		 
		
		 
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				list1:[{
					name:'全部',
					state:'',
				},{
					name:'待使用',
					state:'3',
				},{
					name:'已使用',
					state:'2',
				}],
				current:0,
				activeStyle:{
					fontSize:'30rpx',
					fontWeight:'600',
					color:'#000'
				},
				inactiveStyle:{
					fontSize:'30rpx',
					color:'#333'
				},
				color:'#d7b06d',
				More:true,
				page:1,
				limit:10,
				state:'',   // 0:待支付 1：已成单  2：已核销 3：待付尾款 4:已过期 5：已退款  6:退款中
				pageData:[],
			}
		},
		onLoad() {
			this.getLockOrderList();
		},
		methods: {
			getLockOrderList(){
				this.$http.get({
					url:'/SiteApi/getLockOrderList',
					data:{
						page:this.page,
						limit:this.limit,
						state:this.state
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					const Result = res.data || [];
					this.page == 1?this.pageData = Result:this.pageData = this.pageData.concat(Result);
					if(Result.length < this.limit) this.More = false;
				})
			},
		
			toDetails(id){
				this.toUrl(`Details?id=${id}`);
			},
			click(e){
				this.state = e.state;
				this.getLockOrderList();
				this.More = true;
				this.page = 1;
				this.current = e.index;
			}
		},
		computed:{
			// ...mapState(['color'])
		}
	}
</script>
<style>
	page{
		 background-color: #f5ecda;
	}
</style>
<style lang="scss" scoped>
	.tabs{
		width:100%;
		padding:0 80rpx;
		height:90rpx;
		text-align: center;
	}
	.list{
		width:710rpx;
		margin:20rpx auto 0;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding:20rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	.Tips{
		height: 50rpx;
		padding:0 20rpx;
		border-radius: 0 0 10rpx 10rpx;
		position: absolute;
		top:0;
		right:0;
		z-index:100;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#fff;
		font-size:24rpx;
	}
	.Waiting{
		background-color: #009933;
	}
	.used{
		background-color: #333;
	}
	.expiredbg{
		background-color: #bcbcbc;
	}
	.Img{
		width:120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		
	}
	.conTxt{
		flex:1;
		display: flex;
		flex-direction: column;
	}
	.name{
		font-size:30rpx;
		color:#000;
	}
	.Time{
		color:#999;
		font-size:22rpx;
		margin-top:6rpx;
	}
	.table_li{
		padding:4rpx 10rpx;
		border:1px solid var(--color);
		border-radius: 10rpx;
		color:var(--color);
		font-size:20rpx;
		margin-top:10rpx;
		margin-right: 10rpx;
	}
	.PriceInfo{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		align-self: flex-end;
		margin-left:10rpx;
	}
	.Use{
		color:#FF4B4E;
		font-size:34rpx;
	}
	.Earnest{
		display: flex;
		align-items: center;
		color:#FF4B4E;
	}
	.Balance{
		margin-top:8rpx;
		color:#333;
		display: flex;
		align-items: center;
	}
	.expired{
		background-color: #f1f1f1;
	}
	.expired  .Earnest{
		color:#66666f;
	}
	.expired .table_li{
		color:#66666f;
		border:1rpx solid #66666f;
	}
	.expired .Balance{
		color:#66666f;
	}
</style>
